<template>
  <f7-page>

    <!-- <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">首页</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div> -->

    <div class="index-top">
      <div class="top-left" style="width: 220px">
        <p>上午好</p>
        <div
          class="name"
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
        >
          <f7-link href="/setting/index/">
            <span>系统管理员</span>
            <f7-icon f7="chevron_right"></f7-icon>
            <!-- <img src="/assets/img/xcapp/arrow_right._white.png" alt /> -->
          </f7-link>
        </div>
      </div>
      <div class="top-right">
        <f7-weather
          format="{icon}  <br/>  {observe.weather} {observe.degree}°"
        ></f7-weather>
      </div>
    </div>

    <qm-block class="total-data">
      <div slot="title" class="title">
        <img src="static/img/home/home-6/icon-home-shuju.svg" alt />数据总览
      </div>

      <div class="data-content">
        <qm-show-data number="324" title="病毒维修"></qm-show-data>
        <qm-show-data number="20" title="占到开挖"></qm-show-data>
        <qm-show-data number="864" title="积水预警"></qm-show-data>
        <qm-show-data number="864" title="路灯故障"></qm-show-data>
      </div>
    </qm-block>

    <f7-block class="remind">
        <qm-remind title="新媒体营销，特训营新媒体营营新…" :icon="'static/img/home/home-6/yanghu.svg'"></qm-remind>
    </f7-block>

    <qm-block title="常用功能" class="common-function">
      <div class="content">
        <qm-common-function
          class="item"
          v-for="(item, index) in commonFunction"
          :key="index"
          :icon="item.icon"
          :title="item.title"
          :subtitle="item.subtitle"
          :href="item.href"
          :background="item.background"
          :type="index === commonFunction.length - 1 ? 'more' : ''"
        ></qm-common-function>
      </div>
    </qm-block>

    <!-- <f7-block class="qm-block"> -->
      <qm-block class="disease">
        <div slot="title" class="disease-title">病害跟踪</div>
        <div class="disease-content">
          <qm-show-data
            number="14"
            title="待安排"
            numberColor="#19D3AE"
            titleColor="#61677A"
          ></qm-show-data>
          <f7-icon f7="chevron_right"></f7-icon>
          <qm-show-data
            number="2"
            title="待维修"
            numberColor="#19D3AE"
            titleColor="#61677A"
          ></qm-show-data>
          <f7-icon f7="chevron_right"></f7-icon>
          <qm-show-data
            number="1"
            title="待确认"
            numberColor="#19D3AE"
            titleColor="#61677A"
          ></qm-show-data>
          <f7-icon f7="chevron_right"></f7-icon>
          <qm-show-data
            number="0"
            title="待验收"
            numberColor="#19D3AE"
            titleColor="#61677A"
          ></qm-show-data>
        </div>
      </qm-block>
    <!-- </f7-block> -->

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      commonFunction: [
        {
          icon: "static/img/home/home-6/icon1.svg",
          title: "随机巡查",
          subtitle: "随即巡查任务",
          background: "#F9F9FD",
          href: "/business/index",
        },
        {
          icon: "static/img/home/home-6/icon2.svg",
          title: "巡查任务",
          subtitle: "查巡查任务",
          background: "#FBF7FF",
        },
        {
          icon: "static/img/home/home-6/icon3.svg",
          title: "巡查轨迹",
          subtitle: "查巡查轨迹",
          background: "#F9F9FD",
        },
        {
          icon: "static/img/home/home-6/icon4.svg",
          title: "任务派单",
          subtitle: "查任务派单",
          background: "#FFFBF9",
        },
        {
          icon: "static/img/home/home-6/icon5.svg",
          title: "任务列表",
          subtitle: "方便快捷",
          background: "#F9F9FD",
        },
        {
          icon: "static/img/home/home-6/icon6.svg",
          title: "更多",
          subtitle: "",
          background: "#F1F5FF",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.index-top {
  height: auto;
  height: calc(394px * var(--ratio));
  background-image: url(../../../../static/img/home/home-6/bg-home.svg);
  background-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(32px * 2 * var(--ratio));
  .top-left {
    height: calc(100px * var(--ratio));
    flex-shrink: 1;
    color: var(--color-text-base);
    font-size: var(--font-size-subcontent);
    & > p:first-of-type {
      margin: auto;
    }
    .name {
      .link {
        padding: 0;
        color: var(--color-text-base);
        font-size: var(--font-size-maintitle);
        font-weight: 600;
        .icon {
          margin-left: calc(12px * var(--ratio));
          font-size: var(--font-size-subcontent-2);
        }
      }
    }
  }

  .top-right {
    display: inline-block;
    height: calc(100px * var(--ratio));
    min-width: 30%;
    color: var(--color-text-base);
    font-size: var(--font-size-subcontent);
    text-align: right;

    /deep/ span {
      height: 100%;
      display: inline-block;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      & > br {
        display: none;
      }
    }
    /deep/ .weather-icon {
      width: calc(53px * var(--ratio));
      height: calc(53px * var(--ratio));
    }
  }
}

// 数据总览
.total-data {
  // width: 91.46%;
  margin: 0 calc(32px * var(--ratio));
  margin-top: calc(-130px * var(--ratio));
  background: var(--color-fill-grey-inverse);
  box-shadow: 0px 4px 18px 0px rgba(13, 63, 66, 0.06);
  border-radius: calc(16px * var(--ratio));
  .title {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-subtitle);
    font-weight: 500;
    color: var(--color-text-title);
    img {
      width: calc(36px * var(--ratio));
      height: calc(36px * var(--ratio));
      margin-right: calc(12px * var(--ratio));
    }
  }

  .data-content {
    margin-top: calc(20px * var(--ratio));
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

// 养护提醒
.remind {
  margin-top: calc(40px * var(--ratio));
  margin-bottom: calc(8px * var(--ratio));
}
// 常用功能
.common-function {
  .content {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: calc(30px * var(--ratio));

    // .item {
    //   max-width: 31%;
    //   margin-top: calc(20px * var(--ratio));
    // }
  }
}

// 病害跟踪
// .qm-block {
//   margin-top: calc(20px * var(--ratop));
//   margin-bottom: calc(20px * var(--ratop));
// }

.disease {
  margin: calc(30px * var(--ratio)) calc(32px * var(--ratio));
  background: #e6faf9;
  border-radius: calc(16px * var(--ratio));
  background-image: url("/static/img/home/home-6/icon-home-bingdu.svg"),
    url("/static/img/home/home-6/bg-home-bolang.svg");
  background-repeat: no-repeat;
  background-size: calc(103px * var(--ratio)) calc(103px * var(--ratio)),
    100% calc(50px * var(--ratio));
  background-position: 100% 0%, 0% 100%;
  &-title {
    position: relative;
    &::before {
      position: absolute;
      content: "";
      display: block;
      width: calc(10px * var(--ratio));
      height: calc(23px * var(--ratio));
      background: #31d8b7;
      border-radius: 0 calc(5px * var(--ratio)) calc(5px * var(--ratio)) 0;
      top: 50%;
      left: calc(-32px * var(--ratio));
      transform: translateY(-50%);
    }
  }
  &-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .icon {
      font-size: var(--font-size-subcontent-2);
      color: #ced6e0;
    }
  }
}
</style>
